<template>
	<view class="center" :style="{paddingTop:bottom + 'px'}">
		<view class="bg center">
			<view class="bg-radius"></view>
			<view class="logo"  :hover-class="!login ? 'logo-hover' : ''">
				<image @click="goLogin" class="logo-img" :src="imgLogin ? BASE_IMG + userInfo.avatar : avatarUrl"></image>
				<view class="logo-title">
					<text class="uer-name">{{userInfo.userName}}</text>
				</view>
				<view class="count">
					<view class="count-item" v-for="(c,index) in count">
						<text class="count-item-num">{{c.num === null ? 0 : c.num}}</text>
						<text class="count-item-text">{{c.text}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bg-gray center">
			<view class="center-list">
				<view class="center-list-item border-bottom">

					<button class="list-text" open-type="contact">
						<uni-icons class="my-icon" color="#28b389" type="chatboxes-filled" size="30"></uni-icons>
						联系客服
					</button>
				
				</view>
				<view @click="goAttention" class="center-list-item">
					<button class="list-text" >
						<uni-icons class="my-icon" color="#28b389" type="auth-filled" size="30"></uni-icons>
						我的关注
					</button>
					
				</view>
			</view>
			<view class="center-list">
				<view @click="goSuggestion" class="center-list-item border-bottom">
					<button class="list-text" >
						<uni-icons class="my-icon" color="#28b389" type="flag-filled" size="30"></uni-icons>
						常见问题
					</button>
				</view>
				<view @click="goSuggestion" class="center-list-item">
					<button class="list-text" >
						<uni-icons class="my-icon"  color="#28b389" type="email-filled" size="30"></uni-icons>
						反馈建议
					</button>
				</view>
			</view>
			<view class="center-list">
				<view @click="outLogin" class="center-list-item">
					<button class="list-text" >
						<uni-icons class="my-icon" type="gear-filled" color="#28b389" size="30"></uni-icons>
						退出登录
						</button>
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {BASE_IMG} from "@/utils/imgComBaseUrl.js"
	const {bottom} = uni.getMenuButtonBoundingClientRect()
	const userInfo = ref({})
	const login = ref(false)
	const imgLogin = ref(false)
	const avatarUrl = ref("/static/user/logo.png")
	const count = ref([{
			num: 0,
			text: '收藏'
		},
		{
			num: 0,
			text: '点赞'
		},
		{
			num: 0,
			text: '评论'
		}
	])
	
	function goAttention(){
		uni.navigateTo({
			url:"/pages/attention/attention"
		})
	}
	function goSuggestion(){
		uni.navigateTo({
			url:'/pages/suggestion/suggestion'
		})
	}
	function goLogin(){
		if (!login.value) {
			
			uni.redirectTo({
				url:'/pages/login/login'
			})
		}else{
			uni.redirectTo({
				url:"/pages/img-tailor/img-tailor"
			})
		}
	}
	
	function outLogin(){
		uni.removeStorageSync('userInfo')
		uni.reLaunch({
			url:'/pages/user/user'
		})
		uni.showToast({
			title:"已退出",
			icon:"none"
		})
	}
	function getUserInfo(){
		const user = uni.getStorageSync("userInfo")
		if (Object.keys(user).length === 0) {
		  console.log('对象为空');
		  
		} else {
		  userInfo.value = user
		  login.value = true
		  
		  if(userInfo.value.avatar === null){
			  imgLogin.value = false
			  
		  }else{
			  	  imgLogin.value = true
			  	  count.value = [{
			  		num: userInfo.value.collect,
			  		text: '收藏'
			  	},
			  	{
			  		num: userInfo.value.praise,
			  		text: '点赞'
			  	},
			  	{
			  		num: userInfo.value.comment,
			  		text: '评论'
			  	}
			  ]
		  }
		}
		
		
		
	}
	getUserInfo()
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4218190_6debofuo8gh.ttf?t=1701960489041') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		/* background-color: #cd3b33; */
		background:
			linear-gradient(to bottom, transparent, #fff 400rpx),
			linear-gradient(to right, #beecd8 20%, #F4E2D8);
	}

	.center {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color: #fff;
	$white-color: #fff;
	$main-color: #333;
	$radius: 0rpx;
	$border-color: #efefef;
	$color-1: #007aff;
	$color-2: #4cd964;
	$color-3: #f0ad4e;
	$color-4: #dd524d;
	$list-item-height: 100rpx;
	$list-margin: 20rpx;
	$width: calc(100vw - 0rpx);
	$head-height: 550rpx;
	$head-width: 120vw;
	$margin-left: -60vw;

	.my-icon{
		margin-right: 20rpx;
	}
	.bg {
		width: 100vw;
		height: 435rpx;
		overflow: hidden;
		position: relative;
		box-sizing: border-box;

		.bg-radius {
			background-color: $head-color;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			width: $head-width;
			height: $head-height;
			box-sizing: border-box;
			position: absolute;
			left: 50%;
			margin-left: $margin-left;
			top: 150rpx;
			z-index: 8;
		}

		.logo {
			background-color: transparent;
			border-top-left-radius: 50%;
			border-top-right-radius: 50%;
			width: 100vw;
			box-sizing: border-box;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: 0;
			top: 70rpx;
			z-index: 9;

			.logo-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				border: solid 10rpx #efefef;
			}

			.logo-title {
				height: 150rpx;
				flex: 1;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;

				.uer-name {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 34rpx;
					color: #333;
				}
			}

			.count {
				margin: 30rpx auto 0rpx;
				width: $width;

				.count-item {
					flex-direction: column;
					flex: 1;
					text-align: center;

					.count-item-num {
						color: $main-color;
						font-size: 36rpx;
						font-weight: 500;
					}

					.count-item-text {
						color: $main-color;
						font-size: 28rpx;
						font-weight: 400;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.center-list {
		background-color: #FFFFFF;
		
		margin: 0 auto $list-margin;
		
		width: $width;
		flex-direction: column;
		border-radius: $radius;

		.center-list-item {
			height: $list-item-height;
			width: 100%;
			box-sizing: border-box;
			flex-direction: row;
			padding: 0rpx;
			
			display: flex;
			align-items: center;
			
			
			.list-text {
				height: $list-item-height;
				line-height: $list-item-height;
				font-size: 32rpx;
				color: #555;
				flex: 1;
				background-color: #fff;
				text-align: left;
				display: flex;
				vertical-align: middle;
			}

		}

		.border-bottom {
			border-bottom-width: 1rpx;
			border-color: $border-color;
			border-bottom-style: solid;
		}
	}

	.center-nav {
		background-color: #FFFFFF;
		padding-top: 1rpx;
		margin: 20rpx auto $list-margin;
		width: $width;
		flex-direction: column;
		border-radius: $radius;

		.center-nav-title {
			padding: 25rpx 30rpx;
			font-size: 34rpx;
			color: #333;
			font-weight: 400;
			border-bottom: solid 1rpx $border-color;
		}

		.center-nav-content {
			height: 180rpx;
			display: flex;
			align-items: center;

			.center-nav-item {
				flex-direction: column;
				flex: 1;
				text-align: center;

				.center-nav-item-icon {
					color: #333;
					font-size: 48rpx;
					font-weight: 500;
					font-family: texticons;
				}

				.center-nav-item-text {
					color: #666;
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 15rpx;
				}
			}
		}
	}

	.margin-top {
		margin-top: 20rpx;
		min-height: 230rpx;
	}

	.bg-gray {
		background: #f4f4f4;
		padding-top: 30rpx;
		height: calc(100vh - 435rpx);
	}
</style>